<%--
  Created by IntelliJ IDEA.
  User: 19654
  Date: 2019/10/13
  Time: 20:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.css" type="text/css">
    <style>
        .keshi .first {
            /* box-shadow: 10px 10px 10px rgba(0, 0, 0, .15); */
            float: left;
            border: 2px solid rgb(231, 231, 231);
            background-color: white;
            width: 165px;
            margin-top: 0;
            margin-bottom: 50px;
            margin-right: 20px;
            border-top-left-radius: 0.4em;
            border-top-right-radius: 0.4em;
            border-bottom-right-radius: 0.4em;
            border-bottom-left-radius: 0.4em;
            cursor: pointer;
            font-family: kai;
            font-size: 1em;
            text-align: center;
            padding-top: 0px;
        }

        .first h3 {
            margin-top: 10px;
        }

        .first:hover {
            background-color: rgb(1, 81, 40);
            color: white;
            -moz-transition: all 0.3s ease 0.1s;
            -webkit-transition: all 0.3s ease 0.1s;
            transition: all 0.3s ease 0.1s;
            -o-transition: all 0.3s ease 0.1s;
        }

        .footer {
            background: url(<%=request.getContextPath()%>/imgs/foot.jpg) no-repeat center;
            background-size: cover;
            font-size: 12px;
            height: 200px;
        }

        .romve {
            padding-top: 40px;
            margin-left: 200px;
            color: white;
        }

        @font-face {
            font-family: kai;
            src: url("<%=request.getContextPath()%>/fonts/song.ttf")
        }
        .pic img{
            width: 350px;
            position:relative;
            opacity: 0.6;
            mix-blend-mode: soft-light;
        }
    </style>
</head>
<body>
<%@ include file="../nav/nav.jsp"%>
<div style="padding: 50px 100px 50px;width: 600px;margin: 0 auto">
    <div class="bs-example bs-example-form">

        <div class='input-group'>
            <input type='text' class='form-control' id='searchName' value='${name}'>
            <span class='input-group-btn'>
            <button class='btn btn-default' type='button' onclick='selectAll()'>查询</button></span>
        </div>

    </div>

</div>

<div id="content">

</div>

<script src="../plugins/jquery/jquery.min.js"></script>
<!--引入bootstrap的js文件-->
<script src="../plugins/bootstrap/js/bootstrap.js"></script>

<script>
    $(function(){
        //如果js和jsp在同一个文件中,那么可以在js中使用EL表达式
        //如果js是单独的外部文件,则不允许使用EL表达式
        $("#content").load("list") ;

        $("#search").click(function(){
            var medName = document.getElementById("text").value;

            $.get({
//                type:"POST",
                dataType:"text",
                url:"search",
//                context:"application/json",
                data:{medName:medName},
                async:false,

            })
//            window.location = "search?"+medName;

//            $("#content").load("search");
        })
    });
</script>
<script>
    function selectAll(){

        var name = document.getElementById("searchName").value;

        $("#content").load("list",{name:name});
    }
</script>
</body>
</html>
